<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">

        <h1>总结</h1>
        <p>
            v-html指令:
            1.作用:向指定节点中谊染包含html结构的内容。
            2.与插值语法的区别:
                (1).v-html会替换掉节点中所有的内容，{{xx}}则不会
                (2).v-htm1可以识别htm1结构。
            3.严重注意:v-html有安全性问题!!!!
                (1),在网站上动态渲柒任意HTML是非常危险的，容易导致XSS攻击。
                (2).一定要在可信的内容上使用v-html
                (3) 永不要用在用户提交的内容上!
        </p>

        <p>{{msg}}</p>
        <span v-html="msg"></span>
        <br>
        <span v-html="url"></span>

        <br>
        <span v-html="str"></span>
    </div>
</body>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: 'hello world',
                url:"http://www.baidu.com",
                str:"<h1>这哈被解析了</h1>"
            }
        })
    </script>
</html>